import React,{RefObject ,useState} from 'react'
import {
  Form,
  Input,
  Button,
  Dialog,
  TextArea,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
  Checkbox
} from 'antd-mobile'
import dayjs from 'dayjs'
import axios from 'axios'
import type { DatePickerRef } from 'antd-mobile/es/components/date-picker'
import { Area, Field } from 'react-vant'
import { areaList } from '@vant/area-data'
const Index:React.FC = () => {
     const [value, setValue] = React.useState(['220000', '220300', '220303'])
      let obj={
    id:new Date().getTime().toString(),
    total:5,
    title:'远离疾病早日康复哦亲',
    des:'早日康复哦亲' 
  }
    const zf=async()=>{ 
   
      const res=await axios.get('/api/zf',{params:{obj}})
      console.log(res);
      if(res.data.code==200){
      window.open(res.data.url)
    }
    }
  return (
    <div>
       <Form
        layout='horizontal'
        footer={
          <Button onClick={()=>zf()} block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
       
        <Form.Item
          name='name'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item>
        <Form.Item label='性别'>
 <Checkbox /> 男 <Checkbox /> 女
        </Form.Item >
        <Form.Item label='证件类型'>
        <select name="" id="">
          <option value="1">身份证</option>
          <option value="2">护照</option>
          <option value="3">港澳通行证</option>
          <option value="4">台湾通行证</option>
          <option value="5">回乡证</option>
          <option value="6">台胞证</option>
          <option value="7">其他</option>
        </select>
        </Form.Item>
        <Form.Item label='身份证号'>
          <Input placeholder='请输入证件号' />
        </Form.Item>
        <Form.Item
          name='birthday'
          label='生日'
          trigger='onConfirm'
          onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
            datePickerRef.current?.open()
          }}
        >
          <DatePicker>
            {value =>
              value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
            }
          </DatePicker>
        </Form.Item>
        <Form.Item label='联系方式'>
            <Input
          placeholder='请输入内容'
         
        />
        </Form.Item>
        <Area
      popup={{
        round: true,
      }}
      title='标题'
      value={value}
      areaList={areaList}
      onConfirm={setValue}
    >
      {(_, selectRows, actions) => {
        return (
          <Field
            label='选择地区'
            value={selectRows.map(row => row?.text).join(',')}
            onClick={() => actions.open()}
          />
        )
      }}
    </Area>
      </Form>
    </div>
  )
}

export default Index
